<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>注册界面</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
  <link rel="stylesheet" href="../../layui/css/style.css">

</head>
<body>
<div class="login-main">
  <header class="layui-elip" style="width: 82%;;margin-top:40px">注册页</header>
  <!-- 表单选项 -->
  <form class="layui-form">
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="text" id="user" name="readerId" required lay-verify="required" placeholder="请输入学号"
               autocomplete="off" class="layui-input">
      </div>
      <div class="layui-inline">
        <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
      </div>
      <div class="layui-inline">
        <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
      </div>
    </div>
    <!-- 密码 -->
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="password" id="pwd" name="password" required lay-verify="required" placeholder="请输入密码"
               autocomplete="off" class="layui-input">
      </div>
      <!-- 对号 -->
      <div class="layui-inline">
        <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
      </div>
      <!-- 错号 -->
      <div class="layui-inline">
        <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
      </div>
    </div>
    <!-- 确认密码 -->
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="password" id="rpwd" required lay-verify="required" placeholder="请确认密码" autocomplete="off"
               class="layui-input">
      </div>
      <!-- 对号 -->
      <div class="layui-inline">
        <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
      </div>
      <!-- 错号 -->
      <div class="layui-inline">
        <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
      </div>
    </div>
    <div class="layui-input-block">
      <div class="layui-inline" style="width: 85%">
        <input type="radio" name="sex" value="1" title="男">
        <input type="radio" name="sex" value="0" title="女" checked>
      </div>
    </div>
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="text" name="telephone" required lay-verify="required" placeholder="电话" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="text" name="name" required lay-verify="required" placeholder="姓名" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <input type="text" name="address" required lay-verify="required" placeholder="地址" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-input-inline">
      <div class="layui-inline" style="width: 85%">
        <div class="layui-input-inline">
          <input type="text" name="birthday" lay-verify="required" placeholder="出生日期" autocomplete="off"
                 class="layui-input" id="test1">
        </div>
      </div>
    </div>
    <div class="layui-input-inline login-btn" style="width: 85%">
      <button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>
    </div>
    <hr style="width: 85%"/>
    <p style="width: 85%"><a href="${pageContext.request.contextPath}/toLogin" class="fl">已有账号？立即登录</a></p>
  </form>
</div>


<script type="text/javascript" src="../../layui/layui.js"></script>

<script type="text/javascript">
	layui.use(['form', 'layer', 'jquery', 'laydate', 'element'], function () {
		let form = layui.form;
		let layer = layui.layer;
		let $ = layui.jquery;
		let laydate = layui.laydate;
		let element = layui.element;

		element.init();
		// 给某个位置添加提示信息
    layer.tips("学号就是借阅号哦！", '#user');

		// 执行一个日期插件实例
		laydate.render({
			elem: '#test1',
			trigger: 'click'
		});

		// 注册数据提交注册并跳转到登录页面
		form.on('submit(sub)', function (data) {
			// 提交数据之前，对电话和学号进行正则验证
			if (!new RegExp("^1\\d{10}$").test(data.field.telephone)) {
				layer.msg("请输入11位电话号码");
				return false;
			}
			if (!new RegExp("^[0-9]*$").test(data.field.readerId)) {
				layer.msg("学号只能是数字")
				return false;
			}
			// ajax提交数据到后台
			$.ajax({
				url: '${pageContext.request.contextPath}/readerRegister',
				data: data.field,
				dataType: 'json',
				method: 'POST',
				success: function (res) {
					if (res.success) {
              layer.msg(res.message)
						// 注册成功，跳转到登录页面
            location.href = '${pageContext.request.contextPath}/toLogin';
					} else {
						layer.msg(res.message);
					}
				},
				error: function (res) {
					layer.msg(res.message);
				}
			})
			return false;
		})

    // 注册页面的学号检查是否已存在--失去焦点验证
    $('#user').blur(function (){
        let user = $(this).val();
        // 发送数据到后台检查
      $.ajax({
        url: '${pageContext.request.contextPath}/checkReader',
        method: 'POST',
        dataType: 'json',
        data: {readerId: user},
        success: function (res){
          if (res.success){
	          $('#ri').removeAttr('hidden');
          	$('#wr').attr('hidden', 'hidden');
          } else {
	          $('#wr').removeAttr('hidden');
	          $('#ri').attr('hidden', 'hidden');
	          layer.msg(res.message);
          }
        }
      })
    });

		// 输入密码验证
    $('#pwd').blur(function (){
    	let reg = /^[\w]{1,12}$/;
    	let pwd = $(this).val();
    	if (pwd !== null && pwd.match(reg)){
		    $('#pwr').attr('hidden', 'hidden');
		    $('#pri').removeAttr('hidden')
      } else {
		    $('#pri').attr('hidden', 'hidden');
		    $('#pwr').removeAttr('hidden')
      }
    })

		// 确认密码验证
		$('#rpwd').blur(function (){
      let pwd = $('#pwd').val();
      let rpwd = $(this).val();
      // 两次输入密码验证
      if (pwd === rpwd){
	      $('#rpri').removeAttr('hidden')
	      $('#rpwr').attr('hidden', 'hidden');
      } else {
	      $('#rpri').attr('hidden', 'hidden');
	      $('#rpwr').removeAttr('hidden')
      }
    })





	})
</script>
</body>
</html>